<template>
     <el-form :inline="true" :model="form" label-width="auto" style="padding: 10px;">
       <el-row>
         <el-col :span="4"><label>事件ID</label></el-col>
         <el-col :span="8">{{form.id}}</el-col>
         <el-col :span="4"><label>名称</label></el-col>
         <el-col :span="8">{{form.name}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>产品</label></el-col>
         <el-col :span="8">{{form.tran.profileName}}</el-col>
         <el-col :span="4"><label>终端</label></el-col>
         <el-col :span="8">{{form.tran.terminalName}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>开始时间</label></el-col>
         <el-col :span="8">{{form.startTime}}</el-col>
         <el-col :span="4"><label>确认时间</label></el-col>
         <el-col :span="8">{{form.confirmTime}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>是否确认</label></el-col>
         <el-col :span="8">{{form.confirmed?'是':'否'}}</el-col>
         <el-col :span="4"><label>是否清除</label></el-col>
         <el-col :span="8">{{form.cleared?'是':'否'}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>附加信息</label></el-col>
         <el-col :span="20"> <el-text type="danger">{{form.additionalInfo}}</el-text></el-col>
       </el-row>

        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea"  style="width: 800px;"/>
        </el-form-item>
          <div style="text-align:center;margin: 10px auto;">
            <el-button type="primary" @click="handleConfirm" v-if="!form.confirmed">确认</el-button>
            <el-button type="primary" @click="handleClear" v-if="!form.cleared">清除</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>

</template>
<script>
    import{reactive, ref} from 'vue'
    import {clear,confirm} from '/http/alarm.js'
    import Dwin from "../../component/dwin.vue";
    import {useDict,searchTable} from '/http/options.js'
    import WeekPlan from "../../component/weekPlan.vue";
    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
      components: {Dwin,WeekPlan},
        props:{
          initParams:Object
        },
        setup(props,context){
          const dict = ref({});
          useDict(dict,'fluxData,storePolicy,alarmPolicy');
            const form=reactive({
              id:'',
              name:'',
              terminalCode:'',
              confirm_time:null,
              clear_time:null,
              start_time:null,
              end_time:null,
              cleared:false,
              confirmed:false,
              additional_info:'',
              remark:'',
              signalList:[],
              tran:{

              }
            })
          const handleConfirm = ()=>{
              confirm(form.id,form.remark).then(res=> {
                response(res,context)
              });
          }
          const handleClear = ()=>{
              clear(form.id,form.remark).then(res=> {
                response(res,context)
              });
          }


          const handleCancel = ()=>{
              context.emit('close',false)
          }

          onMounted(()=>{
              Object.assign(form,props.initParams)
          })

          const handleCurrentChange = (val) => {
            console.log(val)
            currentRow.value = val
          }

          return{
            form,handleCancel,dict,handleCurrentChange
            ,handleClear,handleConfirm
          }
        }
    }
</script>

<style scoped>
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
.vertical-radio .el-radio {
  display: block;
  margin-bottom: 10px; /* 可根据需要调整间距 */
}
.header {
  font-size: 16px;
  border-top: #f0f0f0 solid 1px;
  margin: 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.el-row{line-height: 40px;}
.el-col>label{color: #999}
</style>